
import React from 'react';
import * as THREE from 'three';
import { Card, Form, InputNumber } from "antd";
import ColorInput from 'components/ColorInput';
import { useElement } from "tools/hooks/useElement";
import { useProperty } from 'tools/hooks/useProperty';

/** 光源的基 */
export default function LightCard() {

    const { element } = useElement();

    const light = React.useMemo<THREE.Light | undefined>(() => {
        if (!element) return undefined
        if (element.type === 'light') {
            return element.object3D as THREE.Light;
        }
    }, [element])

    const { setProperty } = useProperty(light)

    if (!element || !light) return <></>;
    return (
        <Card title="光源">
            <Form
                layout="horizontal"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
            >
                <Form.Item label='颜色' tooltip='光源的颜色'>
                    <ColorInput
                        value={parseInt(light.color && `0x${light.color?.getHexString()}`)}
                        onChange={e => {
                            setProperty('color')(new THREE.Color(`#${e.toString(16)}`))
                        }}
                    />
                </Form.Item>

                <Form.Item label='强度' tooltip='光照的强度，或者说能量'>
                    <InputNumber
                        bordered={false}
                        size='small'
                        style={{ width: '100%' }}
                        step={0.1}
                        value={light.intensity}
                        onChange={setProperty('intensity')}
                    />
                </Form.Item>
            </Form>
        </Card>
    )
}